import React from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';

export default function Footer() {
  // 6.1 useSelector获取state.type的值
  const type = useSelector((state) => state.type);
  const dispatch = useDispatch();
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        {/* 6.2 让多个按钮的className与type的值比较，相等则具有select，反之则无select */}
        {/* 6.3 onClick事件dispatch发出toggleType的action */}
        <li>
          <a
            onClick={() =>
              dispatch({
                type: 'toggleType',
                payload: 'all',
              })
            }
            className={type === 'all' ? 'selected' : ''}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() =>
              dispatch({
                type: 'toggleType',
                payload: 'active',
              })
            }
            className={type === 'active' ? 'selected' : ''}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() =>
              dispatch({
                type: 'toggleType',
                payload: 'completed',
              })
            }
            className={type === 'completed' ? 'selected' : ''}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}
